<template>
    <div class="trace add">
        <div class="sift detail-info">
            <h3 class="header" @click="test">人员基本信息</h3>
            <div class="c-item">
                <p class="title">姓名<span class="red">*</span></p>
                <div class="name">
                    <input v-model="employeeInfo.DisplayName" type="text" placeholder="点击输入">  
                </div>
            </div>
            <div class="c-item">
                <p class="title">性别<span class="red">*</span></p>
                <div class="name">
                    <!-- <input v-model="employeeInfo.Gender" type="text" laceholder="点击输入">   -->
                    <group>
                        <popup-picker :data="genderList" v-model="gender" @on-change="changeGender"></popup-picker>
                    </group>
                </div>
            </div>
            <div class="c-item">
                <p class="title">年龄<span class="red">*</span></p>
                <div class="name">
                    <input v-model="employeeInfo.Age" type="number" placeholder="点击输入">  
                </div>
            </div>
            <div class="c-item">
                <p class="title">籍贯<span class="red">*</span></p>
                <div class="name">
                    <input v-model="employeeInfo.Hometown" type="text" placeholder="点击输入">  
                </div>
            </div>
            <div class="c-item">
                <p class="title">联系电话<span class="red">*</span></p>
                <div class="name">
                    <input v-model="employeeInfo.PhoneNumber" type="number" placeholder="点击输入">  
                </div>
            </div>
            <div class="c-item">
                <p class="title">人员状态<span class="red">*</span></p>
                <div class="name">
                    <group>
                        <popup-picker :data="employeeList" v-model="employeeStatus" @on-change='changeEmployeeStatus' placeholder="请选择人员状态"></popup-picker>
                    </group>
                </div>
            </div>
            <div class="c-item auto">
                <p class="title">单位名称</p>
                <p class="name auto">{{userInfo.departName?unescape(userInfo.departName):'--'}}</p>
            </div>
            <div class="c-item">
                <p class="title">身份证号<span class="red">*</span></p>
                <div class="name">
                    <input v-model="employeeInfo.IdentityNumber" type="text" placeholder="点击输入">
                </div>
            </div>
            <div class="c-item">
                <p class="title">返岗时间<span class="red">*</span></p>
                <div class="name">
                    <group>
                        <datetime v-model="employeeInfo.ReworkDate" format="YYYY-MM-DD HH:mm"></datetime>
                    </group>
                </div>
            </div>
        </div>
        <div class="sift">
            <h3 class="header">进场筛查信息</h3>
            <div class="c-item">
                <p class="title">体温(℃)</p>
                <div class="name">
                    <group>
                        <x-number v-model="employeeInfo.Yqzs.BodyTemperature" :step="0.1" :fillable="true" :max="41.1"></x-number>
                    </group>
                </div>
            </div>
            <div class="c-item">
                <p class="title">症状</p>
                <div class="name">
                    <group>
                        <popup-picker :data="list2" v-model="value3" @on-change='changeSymptom' placeholder="点击选择"></popup-picker>
                    </group>
                    <!-- <input v-model="employeeInfo.Yqzs.Symptom" type="text" placeholder="点击输入">   -->
                </div>
            </div>
            <div class="c-item">
                <p class="title">筛查结果</p>
                <div class="name">
                    <group>
                        <popup-picker :data="list3" v-model="value4" @on-change='changeSurveyResult' placeholder="请选择筛查结果"></popup-picker>
                    </group>
                    <!-- <input v-model="employeeInfo.Yqzs.SurveyResult" type="text" placeholder="点击输入">     -->
                </div>
            </div>
            <div class="c-item">
                <p class="title">备注</p>
                <div class="name auto">
                  <!-- <input v-model="employeeInfo.Yqzs.Remark" type="text" placeholder="点击输入">  -->
                  <textarea v-model="employeeInfo.Yqzs.Remark"></textarea>    
                </div>
            </div>
            <div class="c-item">
                <p class="title">患者接触史</p>
                <div class="name">
                    <inline-x-switch v-model="employeeInfo.Yqzs.HasTouched"></inline-x-switch>
                </div>
            </div>
            <div class="c-item">
                <p class="title">是否为留守人员</p>
                <div class="name">
                    <inline-x-switch v-model="employeeInfo.Yqzs.StayWorking"></inline-x-switch>
                </div>
            </div>
        </div>
        <div class="sift">
            <h3 class="header">路线轨迹 <span class="add-trace" @click="addTrack">添加轨迹</span></h3>
            <div v-for="(item, index) in employeeInfo.Yqzs.Tracks" :key="index" class="trace-detail">
                <h3 class="header item">轨迹 {{index + 1}} <span class="add-trace" @click="deleteTrack(index)">删除</span></h3>
                <div class="c-item">
                    <p class="title">出发时间<span class="red">*</span></p>
                    <div class="name">
                        <group>
                            <datetime v-model="item.DepartureTime" format="YYYY-MM-DD HH:mm"></datetime>
                        </group>
                    </div>
                </div>
                <div class="c-item">
                    <p class="title">出发地<span class="red">*</span></p>
                    <div class="name">
                        <!-- <group>
                            <x-address title="" v-model="item.DeparturePlace" :list="addressData" placeholder="请选择地点"></x-address>
                        </group> -->
                        <input v-model="item.DeparturePlace" type="text" placeholder="点击输入">
                    </div>
                </div>
                <div class="c-item">
                    <p class="title">交通工具<span class="red">*</span></p>
                    <div class="name">
                        <!-- <group>
                            <popup-picker :data="list1" v-model="item.Trasportation"></popup-picker>
                        </group> -->
                        <input v-model="item.Trasportation" type="text" placeholder="点击输入">
                    </div>
                </div>
                <div class="c-item">
                    <p class="title">车次或车牌号<span class="red">*</span></p>
                    <div class="name">
                        <input type="text" v-model="item.TrackCode" placeholder="请输入车次或车牌号">
                    </div>
                </div>
                <div class="c-item">
                    <p class="title">到达时间<span class="red">*</span></p>
                    <div class="name">
                        <group>
                            <datetime v-model="item.ArrivingTime" format="YYYY-MM-DD HH:mm"></datetime>
                        </group>
                    </div>
                </div>
                <div class="c-item">
                    <p class="title">到达地点<span class="red">*</span></p>
                    <div class="name">
                        <!-- <group>
                            <x-address  title="" v-model="item.arriveArea" :list="addressData" placeholder="请选择地点"></x-address>
                        </group> -->
                        <input v-model="item.ArrivingPlace" type="text" placeholder="点击输入">
                    </div>
                </div>
            </div>
        </div>
        <div class="sift menu">
            <div class="fujian">
                <span class="left">附件</span>
                <span class="right">共上传{{uploadLength}}个附件</span>
            </div>
            <div class="upload-wrap">
                <img v-if="employeeInfo.Yqzs.Attachments&&employeeInfo.Yqzs.Attachments.length>0" :src="employeeInfo.Yqzs.Attachments[0].Url" alt="" class="img-haha">
                <upload  @setFormData="setFormData" limitNumber="5"></upload>
            </div>
            <div class="btns">
                <!-- <div class="save">保存</div> -->
                <!-- <div class="submit" @click="add">提交</div> -->
                <div class="submit" @click="submit">提交</div>
            </div>
        </div>
        <myMenu @clickBack="goBack" v-if="$route.query.share != '1'"></myMenu>
    </div>
</template>

<script>
import { XSwitch, Group, InlineXSwitch, XNumber, Datetime, XAddress, ChinaAddressV4Data, Value2nameFilter as value2name, PopupPicker } from 'vux'
import Upload from '@commonComponents/upload/index'
import myMenu from '@/commonComponents/miniMenu'
import formDate from '../../utils/formatDate'
export default {
    name: 'trace',
    data () {
        return {
            addressData: ChinaAddressV4Data,
            temperature: 36.2, // 体温
            value3: ['正常'],
            value4: ['上岗'],
            employeeStatus: ['已进场'],
            gender: [],
            backPath: '',
            formData: new FormData(),
            images: [],
            uploadLength: 0, // 图片上传个数
            list1: [['高铁', '动车', '普通火车', '城铁', '飞机', '自驾', '其他']],
            genderList: [['男', '女']],
            list2: [['咳嗽', '乏力', '正常', '其他']], // 症状
            list3: [['上岗', '劝返', '隔离', '送防疫部门']], // 筛查结果
            employeeList: [['已进场', '已退场']], // 人员进退场状态
            employeeInfo: {
                "DisplayName":"",
                "Gender":"男",
                "Hometown":"",
                "PhoneNumber":"",
                "IdentityNumber":"",
                "EmployeeType":"",
                "DepartmentName":null,
                "EmployeeNumber":"",
                "Post":"",
                "Age":18,
                "ReworkDate":"",
                "UserId":null,
                "Yqzs":{
                    // "YqzsId":"9c939bf1-8b47-48df-ba5c-55cb8893b9a4",
                    "BodyTemperature":36,
                    "Symptom":"",
                    "HasTouched":false,
                    "StayWorking":false,
                    "SurveyResult":"",
                    "Remark":"",
                    "Tracks":[
                    // {
                    //     "TrackId":"",
                    //     "DepartureTime":"",
                    //     "DeparturePlace":"",
                    //     "ArrivingTime":"",
                    //     "ArrivingPlace":"",
                    //     "Trasportation":"",
                    //     "TrackCode":""
                    // }
                    ],
                    "Employee":null,
                    "Attachments":[
                    ]
                },
                "EmployeeImage":null
            },
            hasTouched: false, // 患者接触史
            stayWorking: false, // 是否为留守人员
            userInfo: {},
            remark: '', // 备注
            isMiniprogram: true, // 是否是在小程序中
            Tracks: [] // 路线轨迹
        }
    },
    components: {
        XSwitch,
        Group,
        InlineXSwitch,
        XNumber,
        Datetime,
        XAddress,
        PopupPicker,
        myMenu,
        Upload
    },
    methods: {
        test () {
            if (this.$route.query.share == '1') {
                this.$router.replace('/epidemicFKEntery')
            } else {
                wx.miniProgram.navigateBack()
            }
        },
        setFormData (formData, uploadLength, images) {
            this.formData = formData
            this.uploadLength = uploadLength
            this.images = images
            console.log(uploadLength)
        },
        // 处理字符串特殊符号
        unescape(html) {
            return html
                .replace(html ? /&(?!#?\w+;)/g : /&/g, '&amp;')
                .replace(/&lt;/g, '<')
                .replace(/&gt;/g, '>')
                .replace(/&quot;/g, '"')
                .replace(/%23/g, '#')
        },
        // 删除轨迹信息
        deleteTrack (idx) {
            this.employeeInfo.Yqzs.Tracks = this.employeeInfo.Yqzs.Tracks.filter((item, index) => {
                return index != idx
            })
        },
        // 添加轨迹信息
        addTrack () {
            // 校验上一条轨迹信息有没有填写完毕
            if (this.employeeInfo.Yqzs.Tracks && this.employeeInfo.Yqzs.Tracks.length > 0) {
                let trackAllIn = true
                this.employeeInfo.Yqzs.Tracks.forEach(item => {
                    for (let k in item) {
                        if (k !='TrackId' && !item[k]) {
                            trackAllIn = false
                        }
                    }
                })
                if (!trackAllIn) {
                    this.$vux.toast.text('请完善轨迹信息');
                    return;
                }
            }
            this.employeeInfo.Yqzs.Tracks.push({
                ArrivingPlace: "",
                ArrivingTime: "",
                DeparturePlace: "",
                DepartureTime: "",
                TrackCode: "",
                Trasportation: "",
            })
        },
        changeGender (val) {
            this.employeeInfo.Gender = val[0]
        },
        changeSurveyResult (val) {
            this.value4[0] = val[0]
            this.employeeInfo.Yqzs.SurveyResult = val[0]
        },
        // 切换人员状态
        changeEmployeeStatus (val) {
            console.log(val)
            this.employeeStatus[0] = val[0]
            this.employeeInfo.EmployeeStatus = val[0]
        },
        changeSymptom (val) {
            this.value3[0] = val[0]
            this.employeeInfo.Yqzs.Symptom = val[0]
        },
        // 点击返回按钮
        goBack () {
            if (this.isMiniprogram) {
                if (this.$route.query.share == '1') {
                    // 确认返回首页
                    wx.miniProgram.redirectTo({
                        url: '/pages/index/index?f5=1'
                    })
                } else {
                    // 页面正常跳转小程序返回.
                    wx.miniProgram.navigateBack()
                }
            } else {
                this.$router.go(-1)
            }
        },
        // 更新人员信息
        submit () {
            console.log(this.employeeInfo.IdentityNumber)
            // 信息校验
            if (!this.employeeInfo.DisplayName) {
                this.$vux.toast.text('请输入姓名');
                return;
            }
            if (!this.employeeInfo.Gender) {
                this.$vux.toast.text('请输入性别');
                return;
            }
            if (!this.employeeInfo.Age) {
                this.$vux.toast.text('请输入年龄');
                return;
            }
            // 校验年龄
            let ageReg = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/
            if (!ageReg.test(this.employeeInfo.Age)) {
                this.$vux.toast.text('年龄输入有误');
                return;
            }
            if (!this.employeeInfo.Hometown) {
                this.$vux.toast.text('请输入籍贯');
                return;
            }
            if (!this.employeeInfo.PhoneNumber) {
                this.$vux.toast.text('请输入联系电话');
                return;
            }
            // 校验手机号码
            let mobileReg = /(^0\d{2,3}\-\d{7,8}$)|(^1[3|4|5|6|7|8][0-9]{9}$)/
            if (!mobileReg.test(this.employeeInfo.PhoneNumber)) {
                this.$vux.toast.text('请输入有效的联系电话');
                return;
            }
            if (!this.employeeInfo.IdentityNumber) {
                this.$vux.toast.text('请输入身份证号');
                return;
            }
            // 校验身份证信息
            let identityReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
            if (!identityReg.test(this.employeeInfo.IdentityNumber)) {
                this.$vux.toast.text('身份证输入不合法');
                return;
            }
            if (!this.employeeInfo.ReworkDate) {
                this.$vux.toast.text('请输入返岗时间');
                return;
            }
            if (!this.employeeInfo.Yqzs.BodyTemperature) {
                this.$vux.toast.text('请输入体温');
                return;
            }
            if (this.employeeInfo.Yqzs.BodyTemperature < 35.5) {
                this.$vux.toast.text('体温数据不能小于35.5');
                return;
            }
            if (this.employeeInfo.Yqzs.Symptom) {
                if (!this.employeeInfo.Yqzs.SurveyResult) {
                    this.$vux.toast.text('请输入筛查结果');
                    return;
                }
            }
            if (this.employeeInfo.Yqzs.SurveyResult) {
                if (!this.employeeInfo.Yqzs.Symptom) {
                    this.$vux.toast.text('请输入症状');
                    return;
                }
            }
            if (this.employeeInfo.Yqzs.Tracks && this.employeeInfo.Yqzs.Tracks.length == 0) {
                let _this = this
                this.$vux.confirm.show({
                    content: '未填写路线轨迹，是否保存',
                    confirmText: '保存',
                    onConfirm () {
                        _this.$vux.loading.show({
                            text: '正在提交...'
                        });
                        let employeeType = _this.$route.query.type
                        if (employeeType == 'glry') {
                            _this.employeeInfo.EmployeeType = '管理人员'
                        }
                        if (employeeType == 'lwry') {
                            _this.employeeInfo.EmployeeType = '劳务人员'
                        }
                        if (_this.$route.query.share == '1') {
                            _this.employeeInfo.DepartmentName = decodeURI(_this.$route.query.deptName)
                            _this.employeeInfo.DepartmentId = _this.$route.query.deptId
                        } else {
                            _this.employeeInfo.DepartmentName = _this.userInfo.departName
                            _this.employeeInfo.DepartmentId = _this.userInfo.departId
                        }
                        _this.employeeInfo.UserId = _this.userInfo.userId
                        _this.$axiosAjax.AddYqzsDetailInfo(_this.employeeInfo, _this.formData).then(res => {
                            console.log(res);
                            _this.$vux.loading.hide();
                            if (res.status == 201) {
                                _this.$vux.toast.text('提交成功')
                                setTimeout(() => {
                                    if (_this.isMiniprogram) {
                                        if (_this.$route.query.share == '1') {
                                            wx.miniProgram.redirectTo({
                                                url: '/pages/index/index?f5=1'
                                            })
                                        } else {
                                            wx.miniProgram.navigateBack()
                                        }
                                    } else {
                                        _this.$router.go(-1)
                                    }
                                }, 1000)
                            }
                            if (res.status == 400) {
                                _this.$vux.toast.text(res.data.Message)
                            }
                        }).catch((e) => {
                            console.log(e.response)
                            if (e.response.status == 400) {
                                _this.$vux.toast.text(e.response.data.Message)
                            }
                        }).finally(() => {
                            _this.$vux.loading.hide();
                        })
                    },
                    onCancel () {}
                })
            }
            // 如果有轨迹信息，则需要补充轨迹信息
            if (this.employeeInfo.Yqzs.Tracks && this.employeeInfo.Yqzs.Tracks.length >0) {
                let trackAllIn = true
                this.employeeInfo.Yqzs.Tracks.forEach(item => {
                    for (let k in item) {
                        if (k !='TrackId' && !item[k]) {
                            trackAllIn = false
                        }
                    }
                })
                if (!trackAllIn) {
                    this.$vux.toast.text('请完善轨迹信息');
                    return;
                }
                // 校验出发时间到达时间
                for (let i = 0; i <= this.employeeInfo.Yqzs.Tracks.length-1; i++) {
                    let traceItem = this.employeeInfo.Yqzs.Tracks[i]
                    let startDate = new Date(traceItem.DepartureTime).getTime()
                    let endDate = new Date(traceItem.ArrivingTime).getTime()
                    if (startDate > endDate) {
                        this.$vux.toast.text('出发时间不能大于到达时间');
                        return;
                    }
                }
                this.$vux.loading.show({
                    text: '正在提交...'
                });
                let employeeType = this.$route.query.type
                if (employeeType == 'glry') {
                    this.employeeInfo.EmployeeType = '管理人员'
                }
                if (employeeType == 'lwry') {
                    this.employeeInfo.EmployeeType = '劳务人员'
                }
                if (this.$route.query.share == '1') {
                    this.employeeInfo.DepartmentName = decodeURI(this.$route.query.deptName)
                    this.employeeInfo.DepartmentId = this.$route.query.deptId
                } else {
                    this.employeeInfo.DepartmentName = this.userInfo.departName
                    this.employeeInfo.DepartmentId = this.userInfo.departId
                }
                this.employeeInfo.UserId = this.userInfo.userId
                this.$axiosAjax.AddYqzsDetailInfo(this.employeeInfo, this.formData).then(res => {
                    console.log(res);
                    this.$vux.loading.hide();
                    if (res.status == 201) {
                        this.$vux.toast.text('提交成功')
                        setTimeout(() => {
                            if (this.isMiniprogram) {
                                if (this.$route.query.share == '1') {
                                    wx.miniProgram.redirectTo({
                                        url: '/pages/index/index?f5=1'
                                    })
                                } else {
                                    wx.miniProgram.navigateBack()
                                }
                            } else {
                                this.$router.go(-1)
                            }
                        }, 1000)
                    }
                    if (res.status == 400) {
                        this.$vux.toast.text(res.data.Message)
                    }
                }).catch((e) => {
                    if (e.response.status == 400) {
                        this.$vux.toast.text(e.response.data.Message)
                    }
                }).finally(() => {
                    this.$vux.loading.hide();
                })
            }
            
        }
    },
    created () {
       // 获取用户当前登录时间
        let nowDate = formDate(new Date())
        let temDate = nowDate.split('-')
        // console.log(nowDate.substring(0, 10) + ' ' + temDate[temDate.length-2] + ':' + temDate[temDate.length-1])
        this.employeeInfo.ReworkDate = nowDate.substring(0, 10) + ' ' + temDate[temDate.length-2] + ':' + temDate[temDate.length-1] 
    },
    mounted () {
        this.userInfo = JSON.parse(localStorage.getItem('registerInfo')) || {}
        this.gender.push(this.employeeInfo.Gender)
        this.employeeInfo.Yqzs.SurveyResult = this.value4[0]
        this.employeeInfo.Yqzs.Symptom = this.value3[0]
        this.employeeInfo.EmployeeStatus = this.employeeStatus[0]
        if (this.$route.query.share == '1') {
            this.employeeInfo.DepartmentName = decodeURI(this.$route.query.deptName)
            this.employeeInfo.DepartmentId = this.$route.query.deptId
        } else {
            this.employeeInfo.DepartmentName = this.userInfo.departName
            this.employeeInfo.DepartmentId = this.userInfo.departId
        }
        this.$nextTick(() => {
            document.querySelector('.vux-number-input').setAttribute('pattern', '')
        })
        // 判断当前是否是分享进入且登录人有单位
        if (this.$route.query.share == '1') {
            this.userInfo.departName = decodeURI(this.$route.query.deptName)
            if (this.isMiniprogram) {
                if (this.userInfo.departId) {
                    if (this.$route.query.deptId != this.userInfo.departId) {
                        this.$vux.alert.show({
                            content: '您已有所属单位，无法加入该单位！',
                            onShow () {
                            },
                            onHide () {
                                wx.miniProgram.redirectTo({
                                    url: '/pages/index/index?f5=1'
                                })
                            }
                        })
                    }
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
    .trace {
        background-color: #EBEEF2;
        .detail-info {
            margin-top: 0 !important;
        }
        .c-item {
            height: 50px;
            line-height: 50px;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #f3f3f3;
            background-color: #fff;
            &.auto {
                height: auto;
                position: relative;
                width: 100%;
                .name {
                    right: 0;
                }
            }
            .name {
                text-align: right;
                color: #999;
                &.auto {
                    max-width: 180px;
                    height: auto;
                    line-height: normal;
                    padding: 5px 0;
                    float: right;
                    textarea {
                        border: none;
                        text-align: right;
                        font-size: 14px;
                    }
                }
                .inline-x-switch {
                    top: 9px
                }
                .weui-switch:checked {
                    border-color: #2269FC;
                    background-color: #2269FC
                }
                input {
                    text-align: right;
                    color: #999;
                    &::-webkit-input-placeholder { /* WebKit browsers */
                        direction: rtl;
                        font-size: 16px;
                    }
                    &::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                        direction: rtl;
                        font-size: 16px;
                    }
                    &::-moz-placeholder { /* Mozilla Firefox 19+ but I'm not sure about working */
                        direction: rtl;
                        font-size: 16px;
                    }
                    &::-ms-input-placeholder { /* Internet Explorer 10+ */
                        direction: rtl;
                        font-size: 16px;
                    }
                }
            }
            .title {
                .red {
                    color: red;
                }
            }
        }
        .sift {
            margin-top: 15px;
            background-color: #fff;
            &.menu {
                border-bottom: 1px solid #f3f3f3;
            }
            .upload-wrap {
                display: flex;
                padding: 5px 5px 5px 15px !important;
                .img-haha {
                    width: 55px;
                    height: 55px;
                    margin: 10px 15px 10px 0;
                }
            }
            .header {
                color: #2269FC;
                font-size: 14px;
                height: 50px;
                line-height: 50px;
                padding-left: 20px;
                font-weight: bold;
                border-bottom: 1px solid #f3f3f3;
                position: relative;
                .add-trace {
                    display: inline-block;
                    width: 80px;
                    height: 30px;
                    line-height: 30px;
                    font-size: 12px;
                    text-align: center;
                    color: #2269FC;
                    border: 1px solid #2269FC;
                    border-radius: 15px;
                    position: absolute;
                    top: 10px;
                    right: 20px;
                }
            }
            .trace-detail {
                .header {
                    &.item {
                        border-bottom: none;
                        padding-left: 30px;
                    }
                }
            }
            .fujian {
                padding: 20px;
                .left {
                    font-weight: bold;
                }
                .right {
                    float: right;
                    color: #999;
                }
            }
            .upload-wrap {
                padding: 0 20px 20px 20px;
            }
            .btns {
            width: 100%;
            display: flex;
            justify-content: center;
            background-color: #fff;
            .save, .submit {
                width: 150px;
                height: 40px;
                line-height: 40px;
                border-radius: 20px;
                text-align: center;
                color: #fff;
                background-color: #2269FC;
            }
            .submit {

            }
        }
        }
        &.add.upload-wrap>div>div:nth-child(5n+5) {
            margin-right: 15px !important;
        }
    }
</style>

<style lang="less">
 .trace {
    .name {
        div:first-of-type {
            height: 100%;
        }
        .weui-cells {
            height: 100%;
            margin-top: 0 !important;
            &::before, &::after {
                border: none;
            }
            .weui-cell {
                padding-right: 0;
                .weui-cell__ft {
                    height: 30px;
                    .vux-number-selector {
                        &.vux-number-selector-plus {
                            margin-right: 0;
                        }
                        height: 100%;
                        background-color: #DAE6FE;
                        svg {
                            fill: #2269FC;
                        }
                    }
                    .vux-cell-value {
                        height: 100%;
                        display: inline-block;
                        padding-top: 5px;
                    }
                    .vux-number-input {
                        height: 100%;
                        font-size: 16px !important;
                    }
                }
            }
        }
    }
 }
 
.vux-popup-dialog {
    height: 300px !important;
}
.weui-dialog__btn_primary {
    color: #2269FC;
}
.weui-dialog__btn {
    font-size: 16px;
}
</style>